<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      ES5-13: https://www.yuque.com/xpromise/fontend/dlgnqqg5ugu3layw

      ES6新特性：
        简单语法：
          let / const 定义变量
            没有变量提升(其实有提升，但是在到达变量定义之前不能访问。等价于没有提升)
            不能重复声明
            产生块级作用域
              const定义的常量，不能直接修改

          对象/数组解构赋值：简化提取对象或数组的属性

          模板字符串：简化字符串拼串

          形参默认值

          ...扩展运算符：1. 展开数组、对象 2. 在函数中代表剩下所有参数

          对象的属性和方法简写


        复杂语法

          箭头函数
            1. 箭头函数和普通函数的区别
            2. this 指向

          class / extends 继承
            1. 构造函数 + 原型
            2. 组合式继承
              Father.call(this, xxx); // 得到属性
              Son.prototype.__proto__ = Father.prototype // 得到方法
            3. class + extends

          Promise / generator / async&await
          
          Set / Map / WeakSet / WeakMap
            Set 类似于数组，但是值不能重复
            Map 类似于对象，但是属性名可以是任意类型

            WeakSet 类似于Set，
              1. 内部的值是弱引用 2. 只能存储对象数据
            WeakMap 类似于Map
              1. 内部的值是弱引用 2. 属性名只能是对象类型，属性值任意

            Vue3响应式原理

          Proxy 代理 
            Vue3响应式原理

      ES6教程：https://es6.ruanyifeng.com/
    */

      // const a = 1;
      // if (true) {
      //   debugger;
      //   // 暂存性死区：块的顶部到定义变量之前的区域
      //   console.log(a); // ReferenceError: Cannot access 'a' before initialization
      //   const a = 2;
      // }

      // let obj = { name: "jack" };
      // const s1 = new Set([1, 2, 2]);
      // s1.add(obj);
      // console.log(s1);
      // obj = null;
      // console.log(s1);

      // let obj = { name: "jack" };
      // const s1 = new WeakSet([{ age: 18 }, [1, 3], function () {}]);
      // console.log(s1);
      // s1.add(obj);
      // console.log(s1);
      // obj = null;
      // console.log(s1);
    </script>
  </body>
</html>
